<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品品类管理</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .mask-chang-type {
            background-color: #000;
            opacity: 0.6;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 20;
        }

        .content-chang-type {
            border-radius: 3px;
            padding: 0 4px 10px 10px;
            position: fixed;
            z-index: 30;
            width: 800px;
            left: 50%;
            margin-left: -400px;
            background-color: #fff;
            top: 10%;
        }
        .choose-title{
            line-height: 38px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div id="vue-box" v-cloak>
    <!--modal-->
    <div class="changetype-modal hide">
        <div class="mask-chang-type hide-mode"></div>
        <div class="content-chang-type">
            <div class="choose-title">批量修改产品品类</div>
            <div class="class-content clearfix">
                <div class="class-level">
                    <div class="item" @click="getSList(index,item.name)" v-for="(item,index) in allList"><span>{{item.name}}</span><i class="icon-sty1 icon_right1"></i> </div>
                </div>
                <div class="class-level">
                    <div class="item" @click="getTList(index,item.name)" v-for="(item,index) in sList"><span>{{item.name}}</span><i class="icon-sty1 icon_right1"></i> </div>
                </div>
                <div class="class-level">
                    <div class="item" @click="getTName(index,item.name)" v-for="(item,index) in TList"><span>{{item.name}}</span><i class="icon-sty1"></i> </div>

                </div>
            </div>
            <div class="selected-text">您当前所选的类目：<span class="color-home">{{nameF}}  {{nameS?'>':''}}  {{nameS}}   {{nameT?'>':''}}  {{nameT}}</span></div>
            <div class="text-c"><span class="btn-sty11 box-shadow-sty1 js-goRelease">确定</span></div>

        </div>
    </div>
    <!--<div id="header_01_html">
        <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
    </div>-->
    <div class="content-box">
        <!--<div id="left_tab_html">
            <iframe id="left_tab" src="left_tab.html?x=1&y=3" frameborder="0"></iframe>
        </div>-->
        <div class="right-box layui-form"  v-cloak>



            <div class="friend-tips">
                <div class="title-box"><i class="icon-sty"></i><b class="title-tip">温馨提示</b></div>
                <div class="info-list">1、在这里您可以批量修改产品的标准品类，请正确选择产品品类</div>
            </div>
            <div class="content-admin">

                <div class="title-toggle">
                    <div class="item active">商品品类管理</div>
                </div>
                <div class="search-box clearfix">
                    <div class="list-sty clearfix mr-0" style="width: 298px;margin-top: 0;">
                        <span class="k-name">产品名称</span>
                        <input type="text" class="layui-input input-v js-name" style="width: 190px;">
                    </div>
                    <div class="list-sty clearfix mr-0" style="width: 298px;margin-top: 0;">
                        <span class="k-name">品类</span>
                        <!--<input type="text" class="layui-input input-v">-->
                        <div class="select-v js-allChange" data-type="1" style="width: 190px;">
                            <input type="text" class="layui-input js-searchClassVal" readonly="readonly" style="width: 260px;">
                        </div>
                    </div>
                    <div class="fl">
                        <!--<div class="no-class-text">-->
                            <!--<span>未分类产品【0】</span>-->
                        <!--</div>-->
                        <div class="search-btn-fl" style="top: 1px;left: 80px;">
                            <span class="btn-sty11 js-searchBtn">搜索</span>
                        </div>
                    </div>

                </div>
                <div>
                    <div class="operation-title">
                        <span class="btn-sty22 mr-15 js-allChange">批量修改品类</span>
                    </div>
                    <div class="table-list">
                        <table>
                            <thead>
                            <tr>
                                <th class="js-allCheck width_80">
                                    <input type="checkbox" id="checkAll" name="" title="全选" lay-skin="primary"
                                           lay-filter="checkAll">
                                </th>
                                <th>标题</th>
                                <th>品类</th>
                                <th>自定义分类</th>
                                <th class="width_200">图片</th>
                                <th>价格</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in pagList">
                                <td class="js-onlyCheck"><input type="checkbox" :id="item.id" name="" lay-skin="primary"
                                                                lay-filter="checkIt"></td>
                                <td>{{item.name}}</td>
                                <td>{{item.commodityType}}</td>
                                <td>{{item.customType}}</td>
                                <td><img :src="imgBaseUrl + item.picUrl" alt="" class="img-sty"></td>
                                <td class="col-sty1">¥{{item.price}}</td>
                                <td>{{item.state == 0?"上架":"下架"}}</td>
                                <td><a :href="Url + item.id" target="_blank" class="colo-blue">查看</a></td>
                            </tr>
                            </tbody>
                        </table>
                        <div id="test1" class="text-r"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>

<script>
    if (getUrlParam('type') == 1) {
        $('.js-getType').find('.item:first-child').removeClass('active1').siblings('.item').addClass('active1');
    }
    var type = '';

    $('.js-getType').on('click', '.item', function () {
        $(this).addClass('active1').siblings().removeClass('active1');
    })

    $('body').on('click', '.class-level .item', function () {
        var index = $(this).parent().index();
        $(this).addClass('active').siblings().removeClass('active');
        if (index < 2) {
            $(this).parent().next().find(".item").removeClass('active');
        }
    })
    $(document).on('click','.js-goRelease',function(){
        if(_type==1){
            console.log($(".color-home").text().replace(/\>/g,",").replace(/\s+/g,""));
            $('.changetype-modal').addClass('hide');
            $('.js-searchClassVal').val($(".color-home").text().replace(/\>/g,",").replace(/\s+/g,""));

        }else{
            var bread = $(".color-home").text().replace(/\>/g,",").replace(/\s+/g,"");
            console.log(bread);
            if(!bread){
                layer.msg('请选择分类');
                return
            }
            get_ajax("/sys/storeCommodity/setCommodityType", {commodityType:bread,ids:addClassId}, function (data) {
                layer.msg('修改成功');
                $('.changetype-modal').addClass('hide');
                app.getPage();
                layui.use('form', function(){
                    var form = layui.form;
                    $("table input[type=checkbox]").prop("checked",false);
                    form.render("checkbox");
                });
            })
        }



    })



    var postData = {
        limit: 5,
        offset: 1,
        type: '',
        name: '',
        state: '',
        originId: '',
        startPrice: '',
        endPrice: '',
        customType: ''
    }

    var app = new Vue({
        el: '#vue-box',
        data: {
            pagList: '',
            imgBaseUrl: imgBaseUrl,
            Url:'http://www.ziselu.com/car/page/product_detail.html?productid=',

            fList: [],
            sList: [],
            TList: [],
            chooseF: '',
            chooseS: '',
            nameF: '',
            nameS: '',
            nameT: '',
            allList: [],
        },
        mounted: function () {
            this.getPage();
            get_ajax("/sys/storeCommodityType/getAllList", {}, function (data) {
                app.allList = data;
            })
        },
        updated: function () {
            layui.use('form', function () {
                var form = layui.form;
                form.render("checkbox");
            });
        },
        methods: {
            getSList: function (index, name) {
                this.nameF = name;
                this.sList = this.allList[index].subordinate;
                this.TList = [];
            },
            getTList: function (index, name) {
                this.TList = this.sList[index].subordinate;
                this.nameS = name;
            },
            getTName: function (index, name) {
                this.nameT = name;
            },
            getPage: function () {
                var that = this;
                get_ajaxPage("/sys/storeCommodity/getMyPage", postData, function (data) {
                    data.data.forEach(function (item) {
                        item.picUrl = item.picUrl.split(",")[0];
                    })
                    that.pagList = data.data;
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'test1'
                            , count: data.count //数据总数，从服务端得到
                            , limit: postData.limit
                            , jump: function (obj, first) {
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数

                                //首次不执行
                                if (!first) {
                                    //do something
                                    postData.offset = obj.curr;
                                    get_ajaxPage("/sys/storeCommodity/getMyPage", postData, function (data) {
                                        data.data.forEach(function (item) {
                                            item.picUrl = item.picUrl.split(",")[0];
                                        })
                                        that.pagList = data.data;
                                    })
                                }
                            }
                        });
                    });
                })


            }
        }
    });

    layui.use('form', function () {  //2级联动
        var form = layui.form;
        form.render("checkbox");
        form.on('checkbox(checkAll)', function (data) {    //layui-触发事件
            var checked = data.elem.checked;
            $("tbody input[type=checkbox]").prop("checked", checked);
            form.render("checkbox");
        });
        form.on('checkbox(checkIt)', function (data) {
            var checked = data.elem.checked;
            var allLength = $("tbody input[type=checkbox]").length;
            var checkLength = $("tbody input[type=checkbox]:checked").length;
            $("#checkAll").prop("checked", allLength == checkLength);
            form.render("checkbox");
        });
    });
    var _type = '';
    var addClassId = '';
    $(document).on('click', '.js-allChange', function () {
        _type = $(this).attr('data-type');
        if($(this).attr('data-type')!=1){
            var arr = [];
            $('tbody').find("input[type='checkbox']:checked").each(function(){
                arr.push($(this).attr('id'));
            })
            if(arr.length<1){
                layer.msg('请选择商品')
                return
            }
        }
        addClassId = String(arr);
        $('.changetype-modal').removeClass('hide');
    })
    $(document).on('click', '.hide-mode', function () {
        $('.changetype-modal').addClass('hide');
    })

    $('.js-searchBtn').on('click', function () {
        postData.name = $('.js-name').val();
//        postData.customType = $('.js-searchClassVal').val();
        app.getPage();
    })

</script>
</body>
</html>